<template>
  <div class="xiazhulan_box">
    <div class="dingbu_xiazhu">
      <div class="display_sw">
        <div class="home_left">
          <span @click="touzhu1" :class="{bottom_border:isbottom}">我要投注</span>
          <span @click="touzhu2" :class="{bottom_border2:isbottom2,}">投注记录</span>
        </div>
        <p class="home_you_fz">
        	余额：{{user_info.wallet}}
         <i class="icon_flush" @click="updateWallet"></i>
        </p>
      </div>
    </div>
    <gameInfo :date="false"></gameInfo>
    <div class="home2_count" v-if="qiehuan1">
      <div class="jixuan_div">
        <span @click="handlerRandom(1)">+机选1注</span>
        <span @click="handlerRandom(5)">+机选5注</span>
        <span @click="$router.back()">继续下注</span>
      </div>

      <ul class="jixuan_ul">
        <li class="jixuan_li" v-for="(item,idx) in cart_list" :key="idx">
          <i class="jixuan_shanchu" @click="handlerDelete(idx)">
            <img src="../../assets/images/caipiao/shanchu.png" />
          </i>
          <div class="jixuan_li_div jixuan_li_divv2">
            <p>{{ item.num_str}}</p>
            <p>{{item.playType}}</p>
          </div>
          <div class="jixuan_li_div jixuan_li_button">
            <button @click="handlerMinus(idx)">-</button>
            <button @click="handlerAdd(idx)">+</button>
          </div>
          <div class="jixuan_li_div3">
            <p>{{item.multiple}}倍{{item.numbers}}注</p>
            <p class="color_red">{{totalPrice(item.multiple, item.numbers, item.amount_model)}}元</p>
          </div>
        </li>
      </ul>

      <button class="clear_btn" @click="handlerClear">清空</button>
      <!--底部-->
      <div class="home_footer">
        <div class="display_strad">
          <div class="footer_div1 number_footer">
            <div class="footer_div1_div number_touqian">
              <div class="touqian">
                <p>
                  共
                  <b class="color_red">{{totalNum}}</b> 注
                </p>
                <p>
                  共
                  <b class="color_red">{{totalMoney}}</b>元
                </p>
              </div>
            </div>
          </div>
          <!-- <button class="footer_xiazhu" @click="isShowPasswordDialog = true">立即下注</button> -->
          <button class="footer_xiazhu" @click="onBetNow">立即下注</button>
        </div>
      </div>
    </div>
    <!--这是五星复式的    投注记录组件的内容-->
    <div class="touzhu_zujian" v-else>
      <touzhujilu></touzhujilu>
    </div>
    <!--下注弹出密码框-->
    <!--<van-dialog
      v-model="isShowPasswordDialog"
      title="温馨提示"
      show-cancel-button
      @cancel="passwordDialogClose"
      @confirm="passwordDialogConfirm"
    >
      <div class="jiaoyi_div">
        <p class="jiaoyi_tishi_p">是否确认下注，确认请输入交易密码</p>
        <input type="password" class="jiaoyi_input" v-model="deal_pwd" placeholder="请输入交易密码" />
      </div>
    </van-dialog>-->

    <van-dialog
      v-model="isShowPasswordDialog"
      message="请确定下注"
      show-cancel-button
      @cancel="passwordDialogClose"
      @confirm="passwordDialogConfirm"
    ></van-dialog>
  </div>
</template>

<script>
import gameInfo from "../AComp/gameInfo";
import touzhujilu from "./components/touzhujilu";
import { mapState, mapActions } from "vuex";
import { randomChip } from "../../util/utils";
import { numbersCart } from "../../service/api";
import _isEmpty from "lodash/isEmpty";
export default {
  computed: {
    totalNum() {
      return this.cart_list.reduce((total, item) => total + item.numbers, 0);
    },
    totalMoney() {
      let sum = 0;
      this.cart_list.forEach(item => {
        let val = parseInt(
          this.totalPrice(item.multiple, item.numbers, item.amount_model)
        );
        sum += val;
      });
      return sum;
    },
    ...mapState(["cart_list", "win_number", "user_info"])
  },
  components: {
    touzhujilu,
    gameInfo
  },
  data() {
    return {
      qiehuan1: true, //我要投注跟投注记录切换显示
      isbottom: true, //我要投注添加class
      isbottom2: false, //投注记录添加class
      isShowPasswordDialog: false, //密码弹窗
      deal_pwd: "" //密码
    };
  },
  created() {},
  methods: {
  	  updateWallet(){
      console.log("更新余额")
      this.$store.dispatch("asyncGetUserInfo");
    },
    onBetNow(){
      if(!this.$store.state.is_bet){
        this.$toast('开奖前一分钟禁止下注');
        return;
      }
      this.isShowPasswordDialog = true
    },
    // 计算总价
    totalPrice(multiple, nums, amount_model) {
      const arr = [2, 0.2, 0.02, 0.002];
      let price = arr[amount_model - 1];
      return (price * nums * multiple).toFixed(2);
    },
    // 减少
    handlerMinus(idx) {
      let arr = this.cart_list;
      arr.forEach((item, index) => {
        if (index === idx) {
          if (item.multiple > 1) {
            item.multiple -= 1;
          }
        }
      });
      this.$store.commit("replace_cart_list", arr);
    },
    // 增加
    handlerAdd(idx) {
      let arr = this.cart_list;
      arr.forEach((item, index) => {
        if (index === idx) {
          item.multiple += 1;
        }
      });
      this.$store.commit("replace_cart_list", arr);
    },
    // 删除
    handlerDelete(idx) {
      let arr = this.cart_list;
      let newArr = arr.filter((item, index) => index !== idx);
      this.$store.commit("replace_cart_list", newArr);
    },
    // 提交
    passwordDialogConfirm() {
      let { deal_pwd, cart_list } = this;
      if (_isEmpty(cart_list)) {
        this.$toast("号码篮不能为空");
        return;
      }
      //    if (!deal_pwd) {
      //      this.$toast("交易密码不能为空");
      //      return;
      //    }

      let temp = [];
      cart_list.forEach(item => {
        let obj = {
          amount_model: item.amount_model,
          multiple: item.multiple,
          num_str: item.num_str,
          playType: item.playType
        };
        temp.push(obj);
      });
      let params = {
        //      deal_pwd,
        orderlist: JSON.stringify(temp)
      };
      numbersCart(params).then(res => {
        if (res.data.status_code === 200) {
          this.$toast(res.data.message);
          this.$store.dispatch("asyncGetUserInfo");
          this.passwordDialogClose();
          this.handlerClear();
        }else{
          this.$toast(res.data.message);
        }
      });
    },
    // 随机下注
    handlerRandom(num) {
      randomChip(num);
    },
    // 清空
    handlerClear() {
      this.$store.commit("replace_cart_list", []);
    },
    // 密码框关闭
    passwordDialogClose() {
      this.isShowPasswordDialog = false;
      this.deal_pwd = "";
    },

    touzhu1() {
      this.qiehuan1 = true;
      this.isbottom = true;
      this.isbottom2 = false;
    },
    //投注记录  五星组合的投注记录
    touzhu2() {
      this.qiehuan1 = false;
      this.isbottom2 = true;
      this.isbottom = false;
    },
    add(index) {
      this.shuzhi++;
    },
    minus(index) {
      this.shuzhi--;
    },

    ...mapActions(["asyncGetUserInfo", "asyncBonusOdd"])
  }
};
</script>

<style>
@import url("../../assets/css/ttcp/xiazhulan.css");
.xiazhulan_box {
  background: #fff;
  height: 100vh;
}

.jixuan_li_div button {
  background-color: #ffffff;
  border-radius: 0.1rem;
  height: 0.4rem;
  color: #d31d17;
  width: 0.88rem;
  font-size: 0.5rem;
  line-height: 0.4rem;
}

.jixuan_li_div button:first-child {
  margin-right: 3%;
}

.jixuan_li_button {
  width: 40%;
  text-align: center;
}
.jixuan_li_divv2 {
  width: 2rem;
  white-space: normal;
  word-break: break-all;
}
</style>
